<template>
  <el-menu
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
    <h4 style="font-size: 40px;font-family:KaiTi;margin: 10px 0px 0px 80px;float: left;font-weight: bold;color: white">
      供应商系统</h4>
    <el-menu-item style="float: right ;color: red;font-weight: bold" @click="login" v-if="!nameStr">登录</el-menu-item>
    <el-menu-item style="float: right ;color: red;font-weight: bold" @click="loginOut" v-if="nameStr">退出</el-menu-item>

    <el-dropdown @command="handleCommand" style="float: right">
      <span class="el-dropdown-link">
          <h4>欢迎你,{{ nameStr }}<i class="el-icon-arrow-down el-icon--right"></i></h4>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="e">主页</el-dropdown-item>
        <el-dropdown-item command="a">更改密码</el-dropdown-item>
        <el-dropdown-item command="b">查看审核状态</el-dropdown-item>
        <el-dropdown-item command="c">修改供应商信息</el-dropdown-item>
        <el-dropdown-item command="d">注销供应商</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <div style="float: right ;font-weight: bold;margin-top: 9px;margin-right: 20px">
      <el-popover
          placement="bottom"
          width="400"
          trigger="click">
        <el-table
            :data="table"
            highlight-current-row
            @current-change="handleCurrentChange">
          <el-table-column width="100" property="page" label="响应页面"></el-table-column>
          <el-table-column width="150" property="orderId" label="编号"></el-table-column>
          <el-table-column width="150" property="info" label="消息"></el-table-column>

        </el-table>
        <el-button slot="reference" type="text" v-if="!messageState">消息中心</el-button>
        <el-button slot="reference" type="text" v-if="messageState" icon="el-icon-message-solid" id="havingMessage">
          消息中心
        </el-button>

      </el-popover>
    </div>
    <el-dialog
        title="注销确定"
        :visible.sync="show"
        width="30%"
    >
      <span>确定要注销当前账号的供应商资格吗?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="louOutSupplier">确 定</el-button>
      </span>
    </el-dialog>
  </el-menu>
</template>

<script>
export default {
  name: "HeaderMenu",
  data() {
    return {
      nameStr: '',
      show: false,
      messageState: false,
      table: [],
      websock: null,
    }
  },
  created() {
    this.initWebSocket();
  },
  destroyed() {
    this.websock.close() //离开路由之后断开websocket连接
  },
  mounted() {
    this.nameStr = this.$store.state.username
  },

  methods: {
    loginOut() {
      localStorage.removeItem("supplierId")
      this.$store.state.username = ''
      this.$router.push("login")
    },
    login() {
      this.$router.push("login")
    },
    handleCommand(command) {
      if (command == 'a') {
        //更改密码
        this.$router.push("changePassword")
      }
      if (command == 'b') {
        //查看审核状态
        this.$router.push("examineAndVerify")
      }
      if (command == 'c') {
        //修改供应商信息
        this.$router.push("changeSupplierInfo")
      }
      if (command == 'd') {
        //注销供应商
        this.show = true;
      }
      if (command == 'e') {
        this.$router.push("Home")
      }
    },
    louOutSupplier() {
      this.$axios.get("api/logOutSupplier/"+this.nameStr).then(
          r => {
            if (r.data == 200) {
              this.$message({
                message: '注销成功',
                type: 'success'
              });
            } else {
              this.$message({
                message: '注销失败,尚有未处理的业务存在',
                type: 'error'
              });
            }
            this.show = false;
          }
      )
    },
    initWebSocket() { //初始化weosocket
      let supplierId = localStorage.getItem("supplierId")
      console.log(supplierId)
      if (supplierId == null) {
        return
      }
      const wsuri = "ws://127.0.0.1:8002/webSocket/" + supplierId;
      this.websock = new WebSocket(wsuri);
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onopen = this.websocketonopen;
      this.websock.onerror = this.websocketonerror;
      this.websock.onclose = this.websocketclose;
    },
    websocketonopen() { //连接建立之后执行send方法发送数据
      this.websocketsend("已连接");
    },
    websocketonerror() {//连接建立失败重连
      this.initWebSocket();
    },
    websocketonmessage(e) { //数据接收
      let message = e.data;
      let temp = message.split(',');
      this.messageState = true;
      let output = null;
      if (temp[0] === '投标请求') {
        output = {
          page: '投标请求',
          orderId: temp[1],
          info: temp[2],
          routerName: 'biding',
        }
      }
      if (temp[0] === '资质审核') {
        output = {
          page: '资质审核',
          orderId: '无',
          info: temp[1],
          routerName: '',
        }
      }
      if (temp[0] === '物流') {
        output = {
          page: '物流',
          orderId: temp[1],
          info: temp[2],
          routerName: 'biding',
        }
      }
      if (output != null) {
        //放入数据
        this.table.push(output)
      }
    },
    websocketsend(Data) {//数据发送
      this.websock.send(Data);
    },
    websocketclose(e) {  //关闭
      console.log(e+":连接失败")
    },

    //点击消息中心table
    handleCurrentChange(row) {
      if (row.routerName !== '') {
        this.$router.push({name: row.routerName, params: {orderId: row.orderId}})
      }
    }
  }
  ,

}
</script>


<style scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}
</style>